<template>
  <view class="myFu">
    <view class="header">
      <view class="content">
        <view class="header-title">
          <view class="icons" @tap="back">
            <u-icon name="arrow-left"></u-icon>
          </view>
          <view class="title">{{ title }}</view>
          <view class="add">
            <!-- 占位标签 -->
            <text v-if="title == '锻炼记录'" @tap="addTo('添加锻炼记录')"
              >添加</text
            >
          </view>
        </view>

        <view class="baseTab" v-if="title == '我的预约'">
          <view class="words" @tap="isBaseChange(true)"
            ><text :style="isBase ? 'border-bottom: 6rpx solid #F4333C' : ''"
              >挂号</text
            >
          </view>
          <view class="words" @tap="isBaseChange(false)"
            ><text :style="!isBase ? 'border-bottom: 6rpx solid #F4333C' : ''"
              >实训基地</text
            >
          </view>
        </view>
        <!--  -->
        <view
          class="header-tabs"
          v-if="title !== '我的课程' && title !== '锻炼记录' && !isBase"
        >
          <view
            class="header-tabs-items"
            v-for="(tabItem, tabIndex) in tabList"
            :key="tabIndex"
            @tap="tabsChange(tabItem.activa)"
          >
            <view
              :class="['text', tabActive == tabItem.activa ? 'actives' : '']"
              >{{ tabItem.name }}</view
            >
          </view>
        </view>
      </view>
    </view>
    <!-- 患者信息 -->
    <view class="patient_cell" v-if="title === '患者信息'">
      <u-cell-group v-for="item in relationUser">
        <u-cell-item
          :title="item.username"
          :key="item.id"
          @tap="toRelationDetail(item)"
        ></u-cell-item>
      </u-cell-group>
      <u-button
        @tap="addRelationUser"
        :custom-style="buttonStyle"
        shape="circle"
        hover-class="none"
        >添加就诊人</u-button
      >
    </view>
    <view class="main">
      <!-- 我的课程 -->
      <view v-if="title === '我的课程'" class="myCourse">
        <view
          class="items"
          v-for="(itemCourse, indexCourse) in courseList"
          :key="indexCourse"
          @tap="
            toCourseDetail({
              id: itemCourse.courseSeriesId,
              payStatus: itemCourse.payStatus,
            })
          "
        >
          <view class="videos">
            <view class="portrait">
              <image class="imgs" :src="itemCourse.expertFace" mode=""></image>
              <view class="username">{{ itemCourse.expertName }}</view>
            </view>
            <image class="bgimg" :src="itemCourse.courseCover" mode=""></image>
          </view>
          <view class="title">{{ itemCourse.cousrName }}</view>
          <view class="pmgressbar">
            <u-line-progress
              :height="12"
              :show-percent="false"
              :percent="Math.ceil(itemCourse.loading)"
              active-color="#F4333C"
            ></u-line-progress>
            <view class="percent">{{ itemCourse.loading }}%</view>
          </view>
        </view>
      </view>
      <!-- 我的咨询 -->
      <view class="consult" v-if="title === '我的咨询'">
        <view
          class="items"
          v-for="(itemConsult, indexConsult) in myConsultList"
          :key="indexConsult"
        >
          <view class="content">
            <view class="status">
              <!-- <view v-if="orderType==='goods'" class="shopType">{{item.shop}}</view> -->
              <view class="time">{{ itemConsult.createTime }}</view>
              <view class="orderType">
                {{ itemConsult.status == "0" ? "待回复" : "" }}
                {{ itemConsult.status == "1" ? "接诊中" : "" }}
                {{ itemConsult.status == "2" ? "已完成" : "" }}
                {{ itemConsult.status == "3" ? "用户已取消" : "" }}
                {{ itemConsult.status == "4" ? "专家取消" : "" }}
              </view>
            </view>
            <view class="detail">
              <!-- ../../../static/img/header.jpg -->
              <image
                class="imgs"
                :src="itemConsult.expert ? itemConsult.expert.face : ''"
                mode=""
              ></image>
              <!-- <view class="shopType">自营店</view> -->
              <view class="inner">
                <view class="username">{{
                  itemConsult.expert ? itemConsult.expert.realName : ""
                }}</view>
                <view class="address">{{ "" }}</view>
                <view class="desc">{{ itemConsult.description }}</view>
                <!-- <view class="priceInner" v-if="orderType==='goods'" >
									<view class="price">￥<text>1999</text></view>
									<view class="count">x 1</view>
								</view> -->
              </view>
            </view>
          </view>
          <view class="paying">
            <view class="">
              <!-- 占位标签 -->
            </view>
            <!-- <view class="paidTotal">应付金额:  <text><span>￥</span>1999</text> </view> -->
            <view class="btns">
              <view
                class="cancels"
                @tap="canclesModal(itemConsult.id)"
                v-if="itemConsult.status == '0'"
                >取消预约</view
              >
              <view class="inPaying" @tap="toConsultDetail()">进入咨询</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 我的预约 -->
      <view class="appoint" v-if="title === '我的预约'">
        <!-- 挂号 -->
        <view class="registration" v-if="isBase">
          <view
            class="base-item"
            v-for="(itemApoint, indexApoint) in appointList"
            :key="indexApoint"
          >
            <view class="title">
              <view class="name">
                <text>姓名 ：</text>{{ itemApoint.userVisitCard.username }}
              </view>
              <view
                class="status"
                :class="{ orderType: itemApoint.status === 1 }"
              >
                {{ itemApoint.status | getApointmentStatus }}
                <!-- {{itemApoint.status=='0'?'待付款':''}}
								{{itemApoint.status=='1'?'待会诊':''}}
								{{itemApoint.status=='2'?'会诊中':''}}
								{{itemApoint.status=='3'?'已完成':''}}
								{{itemApoint.status=='4'?'已取消':''}}
								{{itemApoint.status=='5'?'过号':''}}
								{{itemApoint.status=='6'?'专家取消':''}} -->
              </view>
            </view>
            <view class="items">
              <view class="label"> 时间： </view>
              <view class="val">
                {{ itemApoint.timeSlot }}
                <!-- <view class="val-item" v-for="(timeItem,timeIndex) in itemApoint.timeArr" :key="timeIndex">
									{{timeItem}}
								</view> -->
              </view>
            </view>
            <view class="items">
              <view class="label"> 专家： </view>
              <view class="val">
                {{ itemApoint.expert.realName }}
              </view>
            </view>
            <view class="items">
              <view class="label"> 场地： </view>
              <view class="val">
                {{ itemApoint.site ? itemApoint.site.siteName : "--" }}
              </view>
            </view>
            <view class="btnsGroup">
              <view class="word"> 等待支付 </view>
              <view class="btns">
                <view
                  class="btns-item paying"
                  @tap="goAppointDetail(itemApoint.id)"
                  >查看详情</view
                >
                <view class="btns-item paying" v-if="itemApoint.status == '0'"
                  >去支付</view
                >
              </view>
            </view>
          </view>
        </view>
        <!-- 基地 -->
        <view class="base" v-if="!isBase">
          <view
            class="base-item"
            v-for="(itemBase, indexBase) in dataList"
            :key="indexBase"
            @tap="toreCipeDetail(itemBase)"
          >
            <view class="title">
              <view class="name">
                {{ itemBase.trainingBaseName }}
              </view>
              <view class="status">
                {{ itemBase.status | baseStatus }}
                <!-- {{itemBase.status=='0'?'待付款':''}}
								{{itemBase.status=='1'?'未开始':''}}
								{{itemBase.status=='2'?'进行中':''}}
								{{itemBase.status=='3'?'已结束':''}}
								{{itemBase.status=='4'?'已取消':''}} -->
              </view>
            </view>
            <view class="items">
              <view class="label"> 预约时间 </view>
              <view class="val">
                <view
                  class="val-item"
                  v-for="(item, index) in itemBase.trainingBaseTimeStr.split(
                    ','
                  )"
                  :key="index"
                >
                  {{ item }}
                </view>
              </view>
            </view>
            <view class="items">
              <view class="label"> 费用 </view>
              <view class="val"> ￥{{ itemBase.actualPay }} </view>
            </view>
            <u-line class="u-line" style="padding-top: 16rpx"></u-line>
            <view class="btnsGroup">
              <view class="word">
                {{ itemBase.status | baseStatus }}
              </view>
              <view class="btns">
                <view
                  class="btns-item cancle"
                  v-if="itemBase.status != 4"
                  @tap.stop="cancelOrderBookingModal(itemBase)"
                  >取消预约</view
                >

                <view
                  class="handle"
                  v-if="itemBase.status == '0'"
                  @tap.stop="toPay(itemBase.id)"
                  >去支付</view
                >
                <view class="handle" v-if="itemBase.status == '3'">去评价</view>
                <view
                  class="handle"
                  v-if="itemBase.status == '4'"
                  @tap.stop="delBookingModal({ id: itemBase.id })"
                  >删除</view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 锻炼记录 -->
      <view
        class="exercise"
        v-if="title === '锻炼记录'"
        v-for="(itemExercise, indexExercise) in exerciseList"
      >
        <view
          class="exercise-items"
          :key="indexExercise"
          @tap="toFuncTips(itemExercise)"
        >
          <view class="contentWord">
            {{ itemExercise.content }}
            <!-- {{'打卡第一天，今天总步数6182步，跑步3公里。打卡第一天，今天总步数6188步，跑步3公里...'}} -->
          </view>
          <view class="imgGroup">
            <view
              class="imgGroup-items"
              v-for="(imgItem, imgIndex) in itemExercise.pic"
              :key="imgIndex"
            >
              <image class="imgs" :src="imgItem" mode=""></image>
            </view>
          </view>
          <view class="timer">
            <view class="creatTime">
              {{ itemExercise.createTime }}
            </view>
            <view class="ellipsis" @tap.stop="setDeleteId(itemExercise.id)">
              <image
                class="img"
                src="@/static/tabbar/ellipsis.png"
                mode=""
              ></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 我的订阅 -->
      <view v-if="title === '我的订阅'" class="myRead">
        <view class="readItem" v-for="(item, index) in readList" :key="index">
          <image class="contain-all-person-img" :src="item.img" mode=""></image>
          <view class="contain-all-person-xq">
            <span class="contain-all-person-xq-one">{{ item.name }}</span>
            <span class="contain-all-person-xq-two">{{ item.num }} 成员</span>
          </view>
        </view>
      </view>
      <view>
        <u-action-sheet
          @tap="deleteMyFuncModal"
          :list="list"
          v-model="show"
        ></u-action-sheet>
      </view>
    </view>
    <!-- <u-modal v-model="cancelOrderBooking.show" :mask-close-able="true" @confirm="cancelOrderBookingOk" :show-cancel-button="true" :content="cancelOrderBooking.content"></u-modal> -->
    <u-modal
      v-model="delBookingModalData.show"
      :mask-close-able="true"
      @confirm="delBookingOk"
      :show-cancel-button="true"
      :content="delBookingModalData.content"
    ></u-modal>
    <u-modal
      v-model="ConsultDTOData.show"
      :mask-close-able="true"
      @confirm="cancles"
      :show-cancel-button="true"
      :content="ConsultDTOData.content"
    ></u-modal>
    <u-popup
      v-model="popupShow"
      mode="bottom"
      border-radius="14"
      :closeable="true"
    >
      <view class="detail" v-if="popupShow">
        <view class="title">
          <text>取消预约</text>
        </view>
        <view class="item">
          <view class="font">
            <text>预约用户</text>
          </view>
          <view class="content">
            <text style="margin-right: 10rpx">{{ popupData.username }}</text>
            <u-tag
              :text="userType"
              bg-color="#FFA341"
              type="dark"
              color="#fff"
              size="mini"
            />
          </view>
        </view>
        <view class="item">
          <view class="font">
            <text>联系电话</text>
          </view>
          <view class="content">
            <text>{{ popupData.memberPhone }}</text>
          </view>
        </view>
        <view class="item">
          <view class="font">
            <text>所在单位</text>
          </view>
          <view class="content">
            <text>{{ popupData.trainingBaseName }}</text>
          </view>
        </view>
        <view class="item">
          <view class="font">
            <text>预约基地</text>
          </view>
          <view class="content">
            <text>{{ popupData.trainingBaseName }}</text>
          </view>
        </view>
        <view class="item">
          <view class="font">
            <text>预约时段</text>
          </view>
          <view class="content">
            <view
              v-for="(str, index) in popupData.trainingBaseTimeStr.split(',')"
              :key="index"
            >
              <text>{{ str }}</text>
            </view>
          </view>
        </view>
        <view class="item">
          <view class="font">
            <text>支付金额</text>
          </view>
          <view class="content">
            <view
              v-for="(str, index) in popupData.trainingBaseTimeStr.split(',')"
              :key="index"
            >
              <text>{{ str }}</text>
            </view>
          </view>
        </view>
        <view class="payF">
          <view class="title">
            <text>收费金额</text>
          </view>
          <view class="pay_content">
            <view class="total">
              <text class="icon">￥</text>
              <text class="num">{{ popupData.totalPrice }}</text>
            </view>
            <text class="pay_status">
              <text>{{ orderStatus }}</text>
            </text>
          </view>
        </view>
        <u-button
          @tap="cancelOrderBookingOk"
          :custom-style="buttonStyle"
          shape="circle"
          hover-class="none"
          >确认取消</u-button
        >
      </view>
    </u-popup>
  </view>
</template>

<script>
import { API } from "@/config/myApi.js";
export default {
  data() {
    return {
      popupShow: false,
      popupData: {},
      delBookingObj: {},
      cancelOrderBooking: {
        show: false,
        content: "你确定要取消预约吗？",
      },
      delBookingModalData: {
        show: false,
        content: "你确定要删除预约吗？",
      },
      ConsultDTOData: {
        show: false,
        content: "你确定要取消预约吗？",
        id: "",
      },
      navTitle: {},
      tabActive: "",
      clr: "#F4333C",
      isBase: true,
      title: "",
      myConsultList: [],
      courseList: [],
      exerciseList: [],
      exerciseCount: {
        pageNumber: 1,
        pageSize: 5,
        total: 0,
        sort: "createTime",
        order: "desc",
      },
      consultList: [],
      consultTabList: [
        {
          name: "全部",
          activa: "all",
        },
        {
          name: "待回复",
          activa: "0",
        },
        {
          name: "进行中",
          activa: "1",
        },
        {
          name: "已结束",
          activa: "2",
        },
        {
          name: "已取消",
          activa: "3",
        },
      ],
      baseTabList: [
        {
          name: "全部",
          activa: "",
        },
        {
          name: "待付款",
          activa: "0",
        },
        {
          name: "未开始",
          activa: "1",
        },
        {
          name: "进行中",
          activa: "2",
        },
        {
          name: "已结束",
          activa: "3",
        },
        {
          name: "已取消",
          activa: "4",
        },
      ],
      tabList: [],
      dataList: [],
      appointList: [],
      // optionWord: ['我的咨询','我的预约','我的课程','我的订阅','我的话题','患者信息','锻炼记录']

      //锻炼记录弹出框数据
      list: [
        {
          text: "删除",
          color: "#F4333C",
          fontSize: 28,
        },
      ],
      show: false,
      //删除锻炼记录的id
      deleteFunId: "",

      //患者信息
      relationUser: [],
      buttonStyle: {
        width: "320rpx",
        color: "#fff",
        fontSize: "32rpx",
        backgroundColor: "#F4333C",
        marginTop: "48rpx",
      },
      coursePage: {
        page: 1,
        rows: 8,
        total: 0,
      },
      userRegisterPage: {
        page: 1,
        rows: 4,
        total: 0,
      },
      trainingOrderPage: {
        page: 1,
        rows: 4,
        total: 0,
      },
      consultPage: {
        page: 1,
        rows: 4,
        total: 0,
      },
      // 我的订阅
      readList: [
        {
          id: 1,
          name: "da跑步爱好者",
          num: "5211",
          img: require("@/static/img/header.jpg"),
        },
        {
          id: 2,
          name: "da跑步爱好者",
          num: "5212",
          img: require("@/static/img/header.jpg"),
        },
        {
          id: 3,
          name: "dad跑步爱好者",
          num: "5213",
          img: require("@/static/img/header.jpg"),
        },
      ],
    };
  },
  computed: {
    userType() {
      switch (this.popupData.userType) {
        case "1":
          return "老师";
          break;
        case "2":
          return "社会人士";
          break;
        default:
          return "学生";
          break;
      }
    },
    orderStatus() {
      switch (this.popupData.userType) {
        case "CANCEL":
          return "用户取消";
          break;
        case "PAID":
          return "已支付";
          break;
        default:
          return "未支付";
          break;
      }
    },
  },
  onLoad(option) {
    this.title = option.val;
    this.getData(option.val);
  },
  onShow() {
    if (this.title === "患者信息") this.getRelationUser();
  },
  onReachBottom() {
    switch (this.title) {
      case "锻炼记录":
        this.exerciseCount.pageNumber++;
        const exerciseLastPage = Math.ceil(
          this.exerciseCount.total / this.exerciseCount.pageSize
        );
        if (this.exerciseCount.pageNumber <= exerciseLastPage) {
          this.getExerciseList();
        }
        break;
      case "我的课程":
        this.coursePage.page++;
        const courseLastPage = Math.ceil(
          this.coursePage.total / this.coursePage.rows
        );
        if (this.coursePage.page <= courseLastPage) {
          this.getCourseList();
        }
        break;
      case "我的预约":
        if (this.isBase) {
          this.userRegisterPage.page++;
          const userRegisterLastPage = Math.ceil(
            this.userRegisterPage.total / this.userRegisterPage.rows
          );
          if (this.userRegisterPage.page <= userRegisterLastPage)
            this.getMyApointment();
        } else {
          this.trainingOrderPage.page++;
          const trainingOrderLastPage = Math.ceil(
            this.trainingOrderPage.total / this.trainingOrderPage.rows
          );
          if (this.trainingOrderPage.page <= trainingOrderLastPage)
            this.getMyBase();
          this.tabList = this.baseTabList;
        }
        break;
      case "我的咨询":
        this.consultPage.page++;
        const consultLastPage = Math.ceil(
          this.consultPage.total / this.consultPage.rows
        );
        if (this.consultPage.page <= consultLastPage) {
          this.getListByUserConsultDTOS();
        }
        break;
      default:
        break;
    }
  },
  filters: {
    getApointmentStatus(val) {
      switch (val) {
        case 1:
          return "已预约";
          break;
        case 2:
          return "会诊中";
          break;
        case 3:
          return "已完成";
          break;
        case 4:
          return "用户取消";
          break;
        case 5:
          return "过号";
          break;
        case 6:
          return "专家取消";
          break;
        default:
          return "待付款";
          break;
      }
    },
    baseStatus(val) {
      switch (val) {
        case "1":
          return "未开始";
          break;
        case "2":
          return "进行中";
          break;
        case "3":
          return "已结束";
          break;
        case "4":
          return "已取消";
          break;
        default:
          return "待付款";
          break;
      }
    },
  },
  methods: {
    getData(val) {
      switch (val) {
        case "我的课程":
          this.getCourseList();
          break;
        case "我的咨询":
          this.getListByUserConsultDTOS();
          this.tabList = this.consultTabList;
          break;
        case "我的预约":
          if (this.isBase) {
            this.getMyApointment();
          } else {
            // this.getMyBase()
            this.tabList = this.baseTabList;
          }
          break;
        case "锻炼记录":
          this.getExerciseList();
          break;
        default:
          break;
      }
    },
    addTo(label) {
      // uni.navigateTo({
      let url = "/pages/tabbar/user/myFunctionEdit";
      // })
      let param = {
        label: label,
      };
      this.$navTo.navTos(url, param);
    },
    back() {
      uni.switchTab({
        url: "/pages/tabbar/user/my",
      });
    },

    // 我的咨询
    getListByUserConsultDTOS(val = 0) {
      if (val) {
        this.myConsultList = [];
        this.consultPage.page = 0;
      }
      API.getListByUserConsultDTO({
        page: this.consultPage.page,
        rows: this.consultPage.rows,
        sortField: "createTime",
        sortType: "asc",
      }).then((res) => {
        if (res.code == 200) {
          this.myConsultList = [...this.myConsultList, ...res.result.list];
          this.consultPage.total = res.result.total;
        }
      });
    },
    isBaseChange(e) {
      this.isBase = e;
      if (this.isBase) {
        this.appointList = [];
        this.getMyApointment();
      } else {
        this.dataList = [];
        this.getMyBase();
        this.tabList = this.baseTabList;
      }
    },
    // 我的预约-挂号
    getMyApointment(val = 0) {
      if (val) {
        this.userRegisterPage.page = 1;
        this.appointList = [];
      }
      API.getMyApointment({
        page: this.userRegisterPage.page,
        rows: this.userRegisterPage.rows,
      }).then((res) => {
        if ((res.code = 200)) {
          this.appointList = [...this.appointList, ...res.result.list];
          console.log(this.appointList);
          this.userRegisterPage.total = res.result.total;
        }
      });
    },
    // 我的预约-挂号-详情
    goAppointDetail(val) {
      console.log("后端环境", val);
      uni.navigateTo({
        url: `/pages/tabbar/user/myAppointDetail?id=${val}`,
      });
    },
    // 我的预约-基地
    getMyBase(val = 0) {
      if (val) {
        this.dataList = [];
        this.trainingOrderPage.page = 1;
      }
      API.getMyTrainingOrder({
        page: this.trainingOrderPage.page,
        rows: this.trainingOrderPage.rows,
        searchStatus: this.tabActive,
      }).then((res) => {
        if ((res.code = 200)) {
          this.dataList = [...this.dataList, ...res.result.records];

          this.trainingOrderPage.total = res.result.total;
        }
      });
    },
    // 课程
    getCourseList(val = 0) {
      if (val) {
        this.coursePage.page = 1;
        this.courseList = [];
      }
      API.getUserCourseAsync({
        page: this.coursePage.page,
        rows: this.coursePage.rows,
      }).then((res) => {
        console.log(res.result.records);
        if (res.code == 200) {
          this.courseList = [...this.courseList, ...res.result.records];
          this.coursePage.total = res.result.total;
        }
      });
    },
    // 取消
    cancles() {
      const pram = {
        userRegisterId: this.ConsultDTOData.id,
      };
      API.userConsultCancle(pram).then((res) => {
        if (res.code == 200) {
          this.$u.toast("预约取消成功");
          this.getListByUserConsultDTOS(1);
        }
      });
    },
    tabsChange(e) {
      if (this.tabActive != e) {
        for (let item of this.tabList) {
          if (item.activa === e) {
            this.tabActive = e;
          }
        }
        this.getMyBase(1);
      }
      this.getData(this.title);
    },

    //锻炼记录
    getExerciseList(val = 0) {
      if (val) {
        this.exerciseCount.pageNumber = 1;
        this.exerciseList = [];
      }
      API.getExerciseRecordAsync({
        pageNumber: this.exerciseCount.pageNumber,
        pageSize: this.exerciseCount.pageSize,
        sort: this.exerciseCount.sort,
        order: this.exerciseCount.order,
      }).then((res) => {
        if (res.code == 200) {
          this.exerciseCount.total = res.result.total;
          this.exerciseList = [
            ...this.exerciseList,
            ...res.result.records.map((item) => {
              return {
                content: item.content,
                createTime: item.createTime,
                id: item.id,
                userId: item.userId,
                pic: item.pic.split(","),
              };
            }),
          ];
        }
      });
    },
    toFuncTips(item) {
      uni.navigateTo({
        url: "/pages/tabbar/user/myFuncDetailPage?val=" + JSON.stringify(item),
      });
    },
    setDeleteId(id) {
      this.show = true;
      this.deleteFunId = id;
    },
    deleteMyFuncModal(index) {
      if (index === 0) {
        API.deleteExerciseRecordAsync({ ids: this.deleteFunId }).then((res) => {
          if (res.code === 200) this.getExerciseList(1);
        });
      }
    },

    //患者信息
    async getRelationUser() {
      const { result, code } = await API.findRelationUser();
      if (code === 200) this.relationUser = result;
    },

    toRelationDetail(val) {
      uni.navigateTo({
        url: "/pages/tabbar/user/patientDetail?val=" + JSON.stringify(val),
      });
    },

    addRelationUser() {
      uni.navigateTo({
        url: "/pages/addPatient/addPatient",
      });
    },
    toCourseDetail(obj) {
      uni.navigateTo({
        url: "/pages/course/courseDetail?val=" + JSON.stringify(obj),
      });
    },
    toreCipeDetail(item) {
      uni.navigateTo({
        url:
          "/pages/tabbar/user/reservedDetail/reservedDetail?val=" +
          JSON.stringify(item),
      });
    },
    async cancelOrderBookingOk() {
      const res = await API.cancelOrderBookingAsync({ id: this.popupData.id });
      if (res.code == 200) {
        this.$u.toast("取消成功");
        this.popupShow = false;
        this.getMyBase(1);
      }
    },
    cancelOrderBookingModal(obj) {
      this.popupData = obj;
      this.popupShow = true;
    },
    delBookingModal(obj) {
      this.delBookingModalData.show = true;
      this.delBookingObj = obj;
    },
    async delBookingOk() {
      const res = await API.delOrderBookingAsync(this.delBookingObj);
      if (res.code == 200) {
        this.$u.toast("删除成功");
        this.getMyBase(1);
      }
    },
    toPay(id) {
      uni.navigateTo({
        url: "/pages/base/pay?id=" + id,
      });
    },

    toConsultDetail() {
      uni.navigateTo({
        url: "/pages/tabbar/user/webscoket",
      });
    },
    canclesModal(id) {
      this.ConsultDTOData.id = id;
      this.ConsultDTOData.show = true;
    },
  },
};
</script>

<style lang="scss">
@import "../aless/myFunction.scss";
.detail {
  padding: 37rpx 30rpx 30rpx;
  box-sizing: border-box;
  .title {
    font-size: 34rpx;
    margin-bottom: 40rpx;
  }
  .item {
    width: 100%;
    padding: 20rpx 0 30rpx;
    display: flex;
    font-size: 30rpx;
    font-family: PingFang SC;
    .font {
      color: #999999;
      font-family: PingFang SC;
      margin-right: 41rpx;
    }
    .content {
      color: #333333;
    }
  }
}
.payStatus {
  box-sizing: border-box;
  padding-top: 48rpx;
}
.payF {
  width: 100%;
  padding: 20rpx 0 30rpx;
  display: flex;
  font-size: 30rpx;
  font-family: PingFang SC;
  height: 88rpx;
  box-sizing: border-box;
  .title {
    font-size: 30rpx;
    color: #999;
    margin-right: 41rpx;
  }
  .pay_content {
    display: flex;
  }
  .total {
    font-size: 40px;
    font-family: PingFang SC;
    color: #333333;
    line-height: 8rpx;
    .icon {
      font-size: 24rpx;
    }
    .num {
      font-size: 40rpx;
    }
  }
  .pay_status {
    font-size: 26rpx;
    font-family: PingFang SC;
    color: #35b572;
    margin-left: 21rpx;
  }
}
// 我的订阅
.myRead {
  .readItem {
    display: flex;
    border-bottom: 2rpx solid #D2D2D2;
    padding-bottom: 20rpx;
    margin-top: 34rpx;
    .contain-all-person-img {
      width: 100rpx;
      height: 100rpx;
      border-radius: 20rpx;
    }
    .contain-all-person-xq {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .contain-all-person-xq-one {
        color: #181818;
      }
      .contain-all-person-xq-two {
        margin-top: 20rpx;
        color: #9d9d9d;
      }
    }
  }
}
</style>
